<script setup lang="ts">
/**
 * 全局header
 * @author 高桥凉介
 */
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

/**
 * 使用TS接口定义Header栏数据
 * @author 高桥凉介
 */
import type{Header} from '../types'
import {useRouter} from "vue-router";
import SearchHeader from "@/components/SearchHeader.vue";
const headerData: Header = {
  title: "高桥二手捐赠平台",
  menu: [
    { id: 1, label: "首页", link: "home" },
    {id: 2, label: "捐赠中心", link: "wuliu",},
    { id: 3, label: "任务中心", link: "center" },
    { id: 4, label: "个人中心", link: "user" },
    { id: 5, label: "关于我们", link: "about" },
  ],
};


/**
 * 登录跳转函数
 * @author 高桥凉介
 */
const routers = useRouter();
function goLogin() {
  routers.push("/login")
}

console.log(headerData)
</script>

<template>
  <div class="header">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        :router="true"
    >
      <img
          style="width: 30px;height: 30px; margin-left: 2rem;"
          src="../assets/logo.png"
          alt="cat logo"
      />
      <div class="mess">{{headerData.title}}</div>

      <template v-for="item in headerData.menu">
        <!-- 如果没有子菜单 -->
        <el-menu-item
            class="menu"
            :index="item.link"
        >
          {{ item.label }}
        </el-menu-item>
      </template>

      <div class="search">
        <SearchHeader/>
      </div>

      <el-button type="primary" class="login" @click="goLogin" round>
          登录
      </el-button>


    </el-menu>
  </div>
</template>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-left: 10rem;
}
.startMenu{
  margin-left: 10rem;
}
.menu{
  margin-left: 2rem;
}
.el-menu-demo{
  margin: 0;
  display: flex;
  align-items: center;  /* 垂直居中 */
  background-color: #fcfcfc;
}
.mess{
  margin-left: 1rem;
  margin-right: 2rem;
  color: #615454;
}
.login{
  margin-left: 10rem;
}
.search{
  margin-left: 7rem;
}
</style>